<template>
  <view class="image-wrapper">
    <up-image :src="src" :width="imgWidth" :height="imgHeight" radius="8" @click="previewImage"></up-image>
    <view v-if="!uploadFlag" class="upload-overlay" :style="{ 'width': imgWidth + 'px', 'height': imgHeight + 'px' }">
      <view class="upload-icon">
        <up-loading-icon mode="semicircle" color="#ffffff" size="36"></up-loading-icon>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  src: {
    type: String,
    default: () => ''
  },
  me: {
    type: Boolean,
    default: () => false
  },
  uploadFlag: {
    type: Boolean,
    default: () => false
  }

});
const imgWidth=ref<number>(100);
const imgHeight=ref<number>(100);
const previewImage = () => {
  // 预览图片
  uni.previewImage({
    urls: [props.src],
    longPressActions: {
      itemList: ['发送给朋友', '保存图片', '收藏'],
      success: function(data) {
        console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
      },
      fail: function(err) {
      }
    }
  });
};
</script>

<style scoped>
.image-wrapper {
  position: relative;
}

.upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius:8px;
}

.upload-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
